<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui">

<link rel="icon" href="../images/logo.png" type="image/ico" />

<h:head>
	<style type="text/css">
body {
	background-image: url(../images/fundoLogin.jpg);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center center;
	background-size: 100% 100%;
}

.ui-widget {
	font-size: 9px !important;
}

.backGround {
	background-color: transparent;
}

.size {
	width: 650px;
	position: absolute;
	top: 65%;
	left: 3%;
}

.centro {
	width: 28%;
	position: absolute;
	top: 60%;
	left: 36%;
}
</style>

</h:head>
<h:body>
	<p:growl id="growl" life="10000" autoUpdate="true" />
	<f:view>

		<h:form id="formUsu" prependId="false" acceptcharset="ISO-8859-1"
			lang="pt">
			<p:ajaxStatus onstart="statusDialog.show();"
				onsuccess="statusDialog.hide();" />
			<p:dialog modal="true" widgetVar="statusDialog" header="Aguarde.."
				draggable="false" closable="false" resizable="false"
				style="font-size: 10px">
				<h:panelGrid id="panelLoading">
					<p:graphicImage value="/images/carregando.gif" />
				</h:panelGrid>
			</p:dialog>
			<div align="left">
				<p:panel header="Autenticação de Usuários" id="panelAutentica"
					footer="Integração - Portal de Serviços e Comunicação"
					styleClass="size">
					<br />
					<h:outputText value="Preencha os campos" />
					<br />
					<br />
					<h:panelGrid columns="2" id="panelLogin">

						<h:outputText value="Usuário:" style="font-size:9px" id="lblUsu" />
						<p:inputText id="txtUsu" size="30" required="true"
							requiredMessage="Campo 'Usuário' Vazio"
							value="#{loginBacking.usuarioCadastro.login}" />

						<h:outputText value="Senha:" style="font-size:9px" id="lblSen" />
						<p:password size="30" id="pwpw" feedback="false" required="true"
							requiredMessage="Campo 'Senha Vazio"
							value="#{loginBacking.usuarioCadastro.senha}" />
					</h:panelGrid>
					<br />
					<p:commandLink value="Esqueci minha senha"
						oncomplete="dlgEsqueceSenha.show()" />
					<div align="center">
						<h:panelGrid columns="2" style="font-size:11px" id="pG2">
							<p:commandButton value="Logar" icon="ui-icon-circle-check"
								action="#{loginBacking.logar}" update=":growl" />
							<p:commandButton value="Cancelar" icon="ui-icon-cancel" />
						</h:panelGrid>
					</div>
				</p:panel>
			</div>
		</h:form>

		<p:dialog widgetVar="dlgEsqueceSenha" height="160" width="310"
			showEffect="clip" hideEffect="clip" header="Esqueci minha senha">
			<br />
			<h:form id="formLembrete">
				<h:panelGrid columns="2">
					<h:outputText value="Usuário:" style="font-size:9px" />
					<p:inputText size="10" style="font-size:9px" required="true"
						value="#{loginBacking.usuarioRecSenha}"
						requiredMessage="Informe seu usuário no sistema!">
						<p:ajax event="blur" update="nome" process="@this"
							listener="#{loginBacking.verificaRecuperacao}" />
					</p:inputText>
					<h:outputText value="Nome:" style="font-size:9px" />
					<p:inputText size="50" disabled="true" id="nome"
						value="#{loginBacking.nomeRecSenha}" style="font-size:9px" />
				</h:panelGrid>
				<br />
				<h:outputText
					value="Obs: Ao clicar no botão 'Enviar', enviaremos um e-mail para você com sua nova chave de acesso." />
				<br />
				<br />
				<div align="center">
					<h:panelGrid columns="2">
						<p:commandButton value="Enviar" icon="ui-icon-check"
							actionListener="#{loginBacking.enviaSenhaRecuperada}" />
						<p:commandButton value="Cancelar" icon="ui-icon-cancel"
							oncomplete="dlgEsqueceSenha.hide()" />
					</h:panelGrid>
				</div>
			</h:form>
		</p:dialog>

	</f:view>
</h:body>
</html>